<template>
  <div class="customerOverview-container">
    <div class="customerOverview-page">
      <el-card class="box-card">
        <div class="info-page-top">
          <div class="top-con">
            <div class="big-font">
              <span style="vertical-align: middle"><span style="color:red" v-if="info.isMainCustomer == 1">【主客户】</span>{{ info.customerName }}</span>
              <el-tag type="warning" size="mini" style="vertical-align: middle;font-weight: 400">超{{ ungi }}天未跟进</el-tag>
              <el-tag type="danger"  size="mini" style="vertical-align: middle;font-weight: 400">超{{ uncj }}天未成交</el-tag>
              <el-tag type="success"  size="mini" style="vertical-align: middle;font-weight: 400;margin-left:5px" v-for="(item,index) in goodsLineList" :key="index">
                {{ item.goodsLineName }}</el-tag>
            </div>
            <div class="num-sum">
              <div class="sum-item">
                <div class="num">{{ allBuyNum }}吨</div>
                <div class="label">累计成交量</div>
              </div>
              <div class="sum-item">
                <div class="num">{{ allBuyCount }}</div>
                <div class="label">成交次数</div>
              </div>
              <div class="sum-item" v-for="(item,index) in goodsLineList" :key="index">
                <div class="num">{{ item.buyNum }}吨</div>
                <div class="label">{{ item.goodsLineName }}</div>
              </div>
            </div>

            <div class="top-con-zgs" style="margin-bottom:5px;">
              <div v-if="info.isZ != 1 && info.sonCustomer && info.sonCustomer.length > 0" style="border-top:1px solid #eee;padding-top:5px;font-size: 12px">
                <el-button type="text" size="mini" @click="showfj(3)">
                  转移主客户
                  <el-tooltip class="item" effect="dark" content="主客户权限转移给子客户且只能转给自己的子客户" placement="top-start">
                    <i class="el-icon-info"></i>
                  </el-tooltip>
                </el-button>
                <el-button type="text" size="mini" @click="showfj(4)">
                  绑定子客户
                  <el-tooltip class="item" effect="dark" content="只能绑定无主客户的客户，不可以绑定已存在子客户的主客户也不可以绑定别人的子客户，若绑定，请先解绑" placement="top-start">
                    <i class="el-icon-info"></i>
                  </el-tooltip>
                </el-button>
                <span style="padding-left:10px">
                  <span v-for="item in info.sonCustomer" style="background: #fdf6ec;border:1px solid #f5dab1;padding:2px 10px;border-radius: 5px;display: inline-block;cursor: pointer;margin-bottom:5px;margin-right:5px;white-space:nowrap;" @click="toCustomerInfo(item.customerId)"> {{item.customerName}}</span>
                </span>

              </div>
<!--                <el-button type="text" size="mini" style="position: absolute;right:100px;top:0;" @click="changeMain" v-if="info.isMainCustomer != 1  && relationCustomers.length == 0"> 设为主客户</el-button>-->
<!--                <el-button type="text" size="mini" style="position: absolute;right:100px;top:0;" @click="changeMain" v-else-if="info.isMainCustomer == 1 && relationCustomers.length == 0"> 取消主客户设置</el-button>-->
<!--                <el-button type="text" size="mini" @click="showGL" style="position: absolute;right:0;top:0;" v-if="info.isMainCustomer == 1 || (info.isMainCustomer != 1&& relationCustomers.length == 0)">增加关联公司</el-button>-->
<!--              <div style="font-size:12px">-->
<!--                      <span v-for="item in relationCustomers" style="background: #fdf6ec;border:1px solid #f5dab1;padding:2px 10px;border-radius: 5px;display: inline-block;cursor: pointer;margin-bottom:5px;margin-right:5px;white-space:nowrap;" @click="toCustomerInfo(item)">-->
<!--                        {{item.customerName}}（{{item.isMainCustomer == 1 ? '主客户':'子客户'}}）-->
<!--                        <span @click="changeMain(item)" style="padding-left:10px;color:#409eff;text-decoration: underline">{{item.isMainCustomer == 1 ? '设为子客户' : '设为主客户'}}</span>-->
<!--                        <i class="el-icon-error" style="cursor: pointer;margin-left:10px" @click.stop="delGlcustomer(item)"></i>-->
<!--                      </span>-->
<!--              </div>-->
            </div>
          </div>
          <div class="top-ps"><div class="small-font">
            <span>统一社会信用代码：{{ info.businessCode }}</span>
            <span>最近跟进日期：{{ info.lastTrackingTime }}</span>
            <span>最近成交日期：{{ info.lastOrderTime }}</span>
            <span>创建日期：{{ info.createdAt }}</span>
            <span>创建人：{{ info.creator }}</span>
            <span v-if="info.isZ != 1">
                 <span style="cursor: pointer;color:#409eff;text-decoration: underline" @click="toCustomerInfo(info.parentId)" v-if="info.parentName != ''">主客户：{{info.parentName}}</span>
                 <el-button size="small" type="text" @click="showfj(1,'edit')"  v-if="info.parentId && info.sonCustomer && info.sonCustomer.length == 0">
                    修改主客户
                    <el-tooltip class="item" effect="dark" content="修改对应的主客户" placement="top-start">
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                  </el-button>
                  <el-button size="small" type="text" @click="delfj" v-if="info.parentId && info.sonCustomer && info.sonCustomer.length == 0">
                      解绑主客户
                    <el-tooltip class="item" effect="dark" content="解绑后，变成主客户，可以成为别人的子客户或主客户" placement="top-start">
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                  </el-button>
                 <el-button size="small" type="text" @click="showfj(1,'add')" v-if="!info.parentId && info.sonCustomer && info.sonCustomer.length == 0">
                    绑定主客户
                    <el-tooltip class="item" effect="dark" content="绑定无子客户的客户或存在子客户的主客户" placement="top-start">
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                  </el-button>
                  <el-button type="text" size="mini" @click="showfj(4)" v-if="!info.parentId && info.sonCustomer && info.sonCustomer.length == 0">
                    绑定子客户
                    <el-tooltip class="item" effect="dark" content="只能绑定无主客户的客户，不可以绑定已存在子客户的主客户也不可以绑定别人的子客户，若绑定，请先解绑" placement="top-start">
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                  </el-button>
            </span>

          </div>
          </div>
        </div>
      </el-card>

    </div>
    <!--增加关联公司-->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogVisible8"
      width="400px">
      <div style="max-height: 500px;overflow: auto">
        <el-form :inline="true" size="mini" label-width="120px" ref="GLForm" :model="GLForm">
          <el-form-item label="客户名称：">
            <el-autocomplete
              clearable
              class="inline-input"
              value-key="customerName"
              :fetch-suggestions="querySearch"
              v-model="GLForm.gLcustomerName"
              placeholder="请输入内容"
              @select="handleSelectCustomerName"
              :trigger-on-focus="false"
            ></el-autocomplete>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="handleClose8" size="small">取 消</el-button>
          <el-button type="primary" @click="handleConfirm8" :loading="btnLoading9" size="small">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <addFj ref="addFj" @update="update"></addFj>


  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {formatDate} from '@/utils/date';
import store from '@/store'
import {getCustomerOption, addRelatio, delRelation,changeAjaxEdit} from '@/api/partner'
import {customerNewBaseInfo,customerNewRelationCustomers,customerNewGoodsLineOrderNum,customerNewCycleList,getParentCustomer,updateParent} from '@/api/company'
import customerProgress from './customerProgress'
import addFj from './addFj'
export default {
  name: "customerOverview",
  data(){
    return{
      roles:store.getters.roles ? store.getters.roles : [],
      dialogVisible8:false,
      GLForm:{
        gLcustomerId:'',
        gLcustomerName:'',
      },
      relationCustomers:[],
      btnLoading9:false,
      customerId:'',
      info:{},
      allBuyNum:0,
      allBuyCount:0,
      goodsLineList:[],


    }
  },
  components : {
    customerProgress,addFj
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
    ungi(){
       let  timestamp = new Date().getTime();
       let  endTime  = new Date().getTime();
       if(this.info.lastTrackingTime && this.info.lastTrackingTime != ''){
         endTime = new Date(this.info.lastTrackingTime).getTime()
       }else if(this.info.createdAt && this.info.createdAt != ''){
         endTime = new Date(this.info.createdAt).getTime()
       }
       let diff = parseInt((timestamp - endTime)/(60*60*24*1000));
       return diff

    },

    uncj(){
      let  timestamp = new Date().getTime();
      let  endTime  = new Date().getTime();
      if(this.info.lastOrderTime && this.info.lastOrderTime != ''){
        endTime = new Date(this.info.lastOrderTime).getTime()
      }else if(this.info.createdAt && this.info.createdAt != ''){
        endTime = new Date(this.info.createdAt).getTime()
      }
      let diff = parseInt((timestamp - endTime)/(60*60*24*1000));
      return diff
    },

  },
  created() {

  },
  filters: {

  },
  methods:{
    showfj(type,type2){
      this.$refs.addFj.showfj(type,type2,this.info.parentId,this.info.parentName,this.info.sonCustomer,this.customerId)
    },
    //清除父级
    delfj(){
      this.$confirm('是否确认清除父级?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let  data = {};
        data.customerId = this.customerId;
        data.type = 2
        updateParent(data).then(()=>{
          this.update();
        }).catch(()=>{
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    update(){
      this.getInfo();
      this.getSum();
      this.$emit('update')
    },
    //去新的客户详情页
    toCustomerInfo(customerId){
      let routeData = this.$router.resolve({name:'customerGoodsLineInfo',query:{id:customerId}});
      window.open(routeData.href);
    },

    init(customerId){
      this.customerId = customerId;
      this.getInfo();
      // this.getRelationCustomers();
      this.getSum();

    },
    //获取客户基本信息
    getInfo(){
      customerNewBaseInfo({customerId:this.customerId}).then((res)=>{
          this.info = res
      })
    },

    //获取关联客户
    getRelationCustomers(){
      customerNewRelationCustomers({customerId:this.customerId}).then((res)=>{
        this.relationCustomers = res;
      })
    },

    //获取产品线数量
    getSum(){
      customerNewGoodsLineOrderNum({customerId:this.customerId}).then((res)=>{
        this.allBuyNum = res.allBuyNum;
        this.allBuyCount = res.allBuyCount;
        this.goodsLineList = res.goodsLineList;
      })
    },

    //显示关联公司
    showGL(){
      this.dialogVisible8 = true;
    },
    //关闭关联公司弹窗
    handleClose8(){
      this.dialogVisible8 = false;
      this.GLForm.gLcustomerId = '';
      this.GLForm.gLcustomerName = '';
    },

    //提交关联公司
    handleConfirm8(){
      this.$refs.GLForm.validate((valid) => {
        if (valid) {
          this.btnLoading8 = true;
          addRelatio({customerId:this.customerId,rCustomerId:this.GLForm.gLcustomerId}).then(()=>{
            this.btnLoading8 = false;
            this.handleClose8();
            this.getRelationCustomers();
          }).catch(()=>{
            this.btnLoading8 = false;
          })
        }
      })
    },

    //删除关联公司
    delGlcustomer(item){
      this.$confirm('确认删除此条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRelation({customerId:this.customerId,rCustomerId:item.customerId}).then(()=>{
          this.getRelationCustomers();
        }).catch(()=>{
        })
      }).catch(() => {

      });
    },

    //客户名称输入匹配
    querySearch(queryString, cb){
      getCustomerOption({keywords:queryString,hasRelation:0}).then((res)=>{
        cb(res);
      })
    },

    //选择客户名称
    handleSelectCustomerName(item){
      this.GLForm.gLcustomerId = item.customerId;
      this.GLForm.gLcustomerName = item.customerName;
    },

    //切换主子客户状态
    changeMain(item){
      changeAjaxEdit({customerId:this.info.customerId,isMainCustomer:this.info.isMainCustomer == 1 ? 0 : 1}).then((res)=>{
        this.$message({
          type: 'success',
          message: '客户状态修改成功!'
        });
        this.getRelationCustomers()
        this.getInfo();
      })
    },

  }
}
</script>

<style lang="scss">
.customerOverview-page{
  .el-card__header{
    padding:0;
  }
  padding:20px;
  min-width: 1100px;
  .box-card{
    margin-bottom:20px;
  }
  .el-card__body{
    padding-bottom: 0;
  }
  .info-page-top{
    position: relative;
    .top-con{
      .big-font{
        font-weight: bold;
        padding-bottom:5px;
      }
      .num-sum{
        display: flex;
        justify-content:flex-start;
        align-items:center;
        margin:20px 0;
        .sum-item{
          text-align: center;
          padding:0 20px;
          .num{
            font-size: 18px;
            font-weight: bold;
            margin-bottom:10px;
          }
          .label{
            font-size: 12px;
          }
        }
      }
      .top-con-zgs{
      }
    }
    .top-ps{
      color: #5e6d82;
      border-top:1px solid #EBEEF5;
      padding:5px 0;
      .small-font{
        font-size:14px;
        color:#888;
        line-height: 24px;
        span{
          padding-right:20px;
          font-size:12px;
        }
      }
    }

  }
}
.top-con-zgs{
  margin-bottom:15px;
}
</style>
